<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="main">
	<ul class="main_header">
		<li><h3>卡通动漫</h3></li>
        <li class="main_header_num">
        	<a href="#1" class="active"><span></span></a>
            <a href="#2"><span></span></a>
            <a href="#3"><span></span></a>
        </li>
        <li class="main_header_btn">
        	<em class="main_header_left"></em>
            <em class="main_header_right"></em>
        </li>
        <li class="main_header_more"><a href="#">更多...</a></li>
   </ul>
   <div class="main_body">
       <ul class="main_img">
          <li><a href="#"><img src="images/2.gif" width="100" height="100" title="猫咪1" /></a></li>
          <li><a href="#"><img src="images/1.gif" width="100" height="100" title="猫咪2"/></a></li>
          <li><a href="#"><img src="images/3.gif" width="100" height="100" title="猫咪3"/></a></li>
          <li><a href="#"><img src="images/07.gif" width="100" height="100" title="猫咪4" /></a></li>
          <li><a href="#"><img src="images/1.gif" width="100" height="100" title="猫咪5" /></a></li>
          <li><a href="#"><img src="images/2.gif" width="100" height="100" title="猫咪6" /></a></li>
          <li><a href="#"><img src="images/07.gif" width="100" height="100" title="猫咪7" /></a></li>
		  		<li><a href="#"><img src="images/09.gif" width="100" height="100" title="猫咪8" /></a></li>
       </ul>
   </div>     
</div>
<script>
	$(function(){
		var auto=setInterval(scrolls,6000);//设置时间间隔
		function scrolls(){
			$('.main_header_right').click();
		}		
		var i=3;
		var page=1;	 
		var _width=$('.main_body').width();//显示的长度
		var len=$('.main_img').find('li').length;//计算li的个数
		var page_count=Math.ceil( len /i);  //取整-计算有几页
		if(!$('.main_img').is(':animated')){//判断图片是否在滚动状态
			$('.main_header_right').click(function(){
				if(page==page_count){
					$('.main_img').animate({left:'0px'},'show');
					page=1;	
				}else{
					$('.main_img').animate({left:'-='+_width},'show');//left=left-_width
					page++;
				}
				$('.main_header_num a').eq((page-1)).addClass("active").siblings().removeClass("active");//eq()选取指定index值的元素，从0开始 
			});
			$('.main_header_left').click(function(){
				if(page==1){
					$('.main_img').animate({left:"-="+_width*(page_count-1)},'show');
					page=page_count;
				}else{
					$('.main_img').animate({left:"+="+_width},'show');
					page--;
				}
				$('.main_header_num a').eq((page-1)).addClass("active").siblings().removeClass("active");
			});
		}
		
	});
</script>
</body>
</html>
